<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/map/js/china')
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
import { findPatientGroupByProvince } from '@/api/testDashboard'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      findPatientGroupByProvince().then(res => {
        this.chart.setOption({
          title: {
            text: '患者区域分布图'
          },
          tooltip: {
            trigger: 'item',
            formatter: '患者数量：{c}'
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            show: true,
            left: 'left',
            bottom: 20,
            pieces: [
              {
                value: 0,
                label: '0'
              }, {
                gte: 1,
                lte: 9,
                label: '1-9'
              }, {
                gte: 10,
                lte: 99,
                label: '10-99'
              }, {
                gte: 100,
                lte: 499,
                label: '100-499'
              }, {
                gte: 500,
                lte: 999,
                label: '500-999'
              }, {
                gte: 1000,
                lte: 9999,
                label: '1000-9999'
              }, {
                gte: 10000,
                label: '10000及以上'
              }
            ]
          },
          series: [
            {
              name: '患者区域分布图',
              type: 'map',
              mapType: 'china', // 自定义扩展图表类型
              label: {
                show: true
              },
              data: [
                { name: '新疆', value: res[30].value },
                { name: '西藏', value: res[25].value },
                { name: '青海', value: res[28].value },
                { name: '甘肃', value: res[27].value },
                { name: '四川', value: res[22].value },
                { name: '云南', value: res[24].value },
                { name: '内蒙古', value: res[4].value },
                { name: '黑龙江', value: res[7].value },
                { name: '吉林', value: res[6].value },
                { name: '辽宁', value: res[5].value },
                { name: '北京', value: res[0].value },
                { name: '天津', value: res[1].value },
                { name: '河北', value: res[2].value },
                { name: '宁夏', value: res[29].value },
                { name: '山西', value: res[3].value },
                { name: '陕西', value: res[26].value },
                { name: '山东', value: res[14].value },
                { name: '河南', value: res[15].value },
                { name: '重庆', value: res[21].value },
                { name: '湖南', value: res[17].value },
                { name: '湖北', value: res[16].value },
                { name: '江苏', value: res[9].value },
                { name: '安徽', value: res[11].value },
                { name: '上海', value: res[8].value },
                { name: '贵州', value: res[23].value },
                { name: '广西', value: res[19].value },
                { name: '广东', value: res[18].value },
                { name: '江西', value: res[13].value },
                { name: '浙江', value: res[10].value },
                { name: '福建', value: res[12].value },
                { name: '海南', value: res[20].value },
                { name: '香港', value: res[32].value },
                { name: '澳门', value: res[33].value },
                { name: '台湾', value: res[31].value },
                { name: '南海诸岛', value: 0 }
              ]
            }
          ]
        })
      })
    }
  }
}
</script>
